<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/global.css">
    <link rel="stylesheet" href="./assets/videojs/video-js.css">
    <style>
        .video-js {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div>
        <video id="hls" class="video-js vjs-default-skin" width="600" height="400" controls preload="none"
            data-setup='{}'>
        </video>
    </div>
    <!-- <div>
        <video id="flv" class="video-js vjs-default-skin" width="600" height="400" controls preload="none"
            data-setup='{}'>
        </video>
    </div> -->
    <script src="./assets/videojs/video.min.js"></script>
    <script>

        let hlsPath = 'http://220.161.87.62:8800/hls/1/index.m3u8'
        var hls = videojs(document.querySelector('#hls'))
        hls.ready(function () {
            this.reset();
            this.src({ type: "application/x-mpegURL", src: hlsPath })
        })
        // var flv = videojs(document.querySelector('#flv'))
        // flv.ready(function () {
        //     this.reset();
        //     this.src({ type: "rtmp/flv", src: "rtmp://live.hkstv.hk.lxdns.com/live/hks" })
        // })

    </script>

</body>

</html>